<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <todo-header @add="handleAdd"></todo-header>
    <!-- 主体部分 -->
    <!-- 组件通讯里面 事件名可以随便起 - 不用担心有问题，如果真的有思想斗争，那你就起一个见名知意
      起个其他名字就可以了 
      <input @change/>
      <todo-main @change></todo-main>
    -->
    <todo-main
      :list="showList"
      @del="handleDel"
      @changeFn="handleChange"
    ></todo-main>
    <!-- 底部部分 -->
    <todo-footer
      :type="type"
      :list="list"
      v-if="list.length"
      @clear="handleClear"
      @changeType="handleChangeType"
    ></todo-footer>
  </section>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter: TodoFooter,
  },
  data() {
    return {
      type: "all", // 提供type数据 当前哪个高亮 全部高亮
      list: [
        {
          id: 1,
          name: "吃饭",
          done: true,
        },
        {
          id: 2,
          name: "睡觉",
          done: false,
        },
        {
          id: 3,
          name: "打豆豆",
          done: false,
        },
      ],
    };
  },
  methods: {
    handleChangeType(type) {
      console.log("儿子给父亲的type", type);
      this.type = type;
    },
    handleClear() {
      // console.log("儿子通知父亲要清除已完成的任务");
      // 清空已完成的 使用filter方法 - 会返回新数组 所以要赋值
      // 清空已完成的 - 删除所有已完成的 - 已完成的不要 -> 过滤出未完成的
      this.list = this.list.filter((item) => !item.done);
    },
    handleAdd(name) {
      // console.log("儿子传给父亲的", name);
      // 处理添加逻辑 unshift往前加 push往后加
      this.list.unshift({
        id: Date.now(),
        name,
        done: false,
      });
    },
    handleChange(id) {
      // console.log("儿子通知父亲要改状态", id);
      // 数组里找到对应的某一项 用什么方法 find
      const item = this.list.find((item) => item.id === id);
      // 把对应的done属性取反
      item.done = !item.done;
    },
    handleDel(id) {
      // console.log("儿子通知父亲的", id);
      // 删除那一项就是不要那一项，所以过滤用的!==
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
  computed: {
    showList() {
      if (this.type === "all") {
        // 展示所有的列表内容
        return this.list;
      } else if (this.type === "active") {
        // 展示进行中 没完成的 !item.done
        return this.list.filter((item) => !item.done);
      } else {
        // 展示已完成的 item.done
        return this.list.filter((item) => item.done);
      }
    },
  },
};
</script>

<style></style>
